<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>第一个Vue组件</title>
    <!-- 安装vue：当你使用script进行vue安装之后，上下文就注册了一个全局变量 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!-- 
        组件的使用分为三步：
            第一步：创建组件
                Vue.extend({ 该配置项和【new Vue】的配置项几乎相同，略有区别 })
                区别有哪些？
                    1.创建vue组件的时候，配置项中不能使用el配置项。（但需要使用template配置项来配置模板语句）
                    2.配置项中的data不能使用直接对象的形式，必须使用function
            第二步：注册组件
                局部注册：
                    在配置项当中使用components，语法格式：
                        compnents:{
                           组件的名字 : 组件对象  
                        }
                全局注册
                     Vue.component(组件的名字 : 组件对象)
            第三步：使用组件

        小细节：
            1. 在vue当中是可以使用自闭合标签的，但是前提是必须在脚手架环境中使用。
            2. 在创建组件的时候Vue.extend()可以省略，但是底层实际上还是会调用的，在注册组件时候会调用。
            3. 组件的名字
                第一种：全部小写
                第二种：首字母大写，后面全部小写
                第三种：kebab-case命名法（串式命名法，例如：user-login）
                第四种：CamelCase命名法（驼峰式命名法，例如UserLogin。但是这种方式只允许在脚手架环境中使用）
                不要使用html内置的标签名作为组件的名字
    -->
    <div id="app">
        <h1>{{msg}}</h1>

        <!-- 替换组件的方式 -->
        <!-- <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}} ,{{user.name}}
                </li>
             </ul> -->

        <!-- 3.使用组件 -->
        <userlist></userlist>
        <userlist></userlist>



        <!-- 全局注册组件 -->
        <userlogin></userlogin>
        <!-- 自闭和，需要在脚手架环境下使用 -->
        <!-- <userlogin /> -->


        <helloworld></helloworld>
        <Helloworld></Helloworld>
        <hello-world></hello-world>
        <!-- <HelloWorld></HelloWorld>  只允许在脚手架环境 -->
    </div>

    <!-- 第二个容器 -->
    <div id="app2">
        <userlogin></userlogin>
    </div>


    <script>

        // 创建组件
        const abc = {
            template: `<h1>测试组件的名字</h1>`
        }

        Vue.component('helloworld', abc)
        Vue.component('Helloworld', abc)
        Vue.component('hello-world', abc)
        Vue.component('HelloWorld', abc)


        // 1.创建组件（结构html 交互js 样式 css）
        /* 
        // 可以使用省略模式：省略Vue.extend()
        const myComponent = Vue.extend({
            // 由于组件面向所有的vue实例，故不可以指定el 
            // el: '#app',
            template: `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}} ,{{user.name}}
                </li>
            </ul>
            `,
            data() {
                return {
                    users: [
                        { id: '001', name: 'jack' },
                        { id: '002', name: 'lucy' },
                        { id: '003', name: 'james' },
                    ]
                }

            }
        })
        */
        const myComponent = {
            // 由于组件面向所有的vue实例，故不可以指定el 
            // el: '#app',
            template: `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}} ,{{user.name}}
                </li>
            </ul>
            `,
            data() {
                return {
                    users: [
                        { id: '001', name: 'jack' },
                        { id: '002', name: 'lucy' },
                        { id: '003', name: 'james' },
                    ]
                }

            }
        }

        // 1.创建组件
        const userLoginComponent = Vue.extend({
            template: `
            <div>
                <h3>用户登录</h3>
                <form @submit.prevent='login'>
                    账号：<input type='text' v-model='username'/>
                    密码：<input type='password' v-model='password'/>
                    <button>登陆</button>    
                </form>
            </div>
            `,
            data() {
                return {
                    username: '',
                    password: ''
                }
            },
            methods: {
                login() {
                    alert(this.username + " , " + this.password)
                }
            }
        })

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '第一个Vue组件',
                // 切换为组件的方式
                /* users: [
                    { id: '001', name: 'jack' },
                    { id: '002', name: 'lucy' },
                    { id: '003', name: 'james' },
                ] */
            },
            // 2.注册组件（局部注册）
            components: {
                // userlist是组件的名字，myComponent只是一个变量名
                userlist: myComponent,
                // userlogin: userLoginComponent  //进行全局注册实现
            }
        })

        // 第二个vue实例，进行全局注册
        Vue.component('userlogin', userLoginComponent)

        const vm2 = new Vue({
            el: '#app2',
        })


        // 对象的方式，x和y共享data，x修改data内容，y也会变更    
        /* let data = {
            counter:1
        } */

        // 使用函数每次都是一个单独的对象，不会发生数据共享一份
        function data() {
            return {
                counter: 1
            }
        }

        let x = data
        let y = data


    </script>

</body>

</html>